<template>
	<custom-page title="我的订单" backgroundColor="#F9F9F9" :left-buttons="[]">
		<template #page>
			<view class="page-content">
				<top-tab-bar-news minWidth="20%" :tabs="tabDatas" :current="current" @changed="onTabItemChange($event)">
				</top-tab-bar-news>
				<common-list-view ref="orderList" class="list-view" :enableLoadMore="true" :enableRefresh="true"
					@listinit="onListInit($event)" :hasNoDataHolder="true" :noDataImage="asserts.ic_order_empty">
					<template #content='{datas}'>
						<view class="order-item" v-for="(item, index) in datas" @click="orderClick(item)">
							<view class="title-row">
								<view class="num">{{item.orderNo}}</view>
								<view class="status">{{item.orderStatusDesc}}</view>
							</view>
							<view class="divider"></view>
							<view class="store">
								<view>{{item.assistantName}}</view>
								<image class="assistant-leve" :src="item.assistantPicture"></image>
							</view>
							<view class="content">台球店铺：{{item.pollName}}</view>
							<view class="content">服务开始时间：{{item.serviceStartTime}}</view>
							<view class="content">服务结束时间：{{item.serviceEndTime}}</view>
							<view class="content">订单金额：<text class="money">￥{{item.totalPaymentStr}}</text></view>
							<view style="height: 32rpx;"></view>
							<view class="divider"></view>
							<view class="bottom-row">
								<view class="btn2" @click.stop="abnormalClick(item)"
									v-if="(item.orderStatus==2 || item.orderStatus==3 || item.orderStatus==4 || item.orderStatus==5)">异常申诉</view>
									
								<view class="btn1" @click.stop="abnormalRecordClick(item)"
										v-if="(item.orderStatus!=0)">申诉记录</view>
										
								<view class="btn2" @click.stop="payNowClick(item)" v-if="item.orderStatus==0">立即支付</view>
								<!-- v-if="item.orderStatus==4" -->
								<view class="btn2" @click.stop="renewOrderClick(item)" v-if="item.orderStatus==4">续单</view>
							</view>
						</view>
					</template>
				</common-list-view>
			</view>
		</template>
	</custom-page>
</template>

<script>
	export default {
		data() {
			return {
				tabDatas: [{
						text: '待支付',
						value: '0'
					},
					{
						text: '待接单',
						value: '2'
					},
					{
						text: '待服务',
						value: '3'
					},
					{
						text: '服务中',
						value: '4'
					},
					{
						text: '服务完成',
						value: '5'
					},
					{
						text: '已完成',
						value: '6'
					},
					{
						text: '拒绝订单',
						value: '7'
					},
					{
						text: '已关闭',
						value: '10'
					}
				],
				current: 0,
			}
		},
		onLoad(val) {
			if (val && val.index) {
				let index = Number(val.index)
				if (index) {
					this.current = index
				}
			}
		},
		methods: {
			//tab切换
			onTabItemChange: function(event) {
				this.current = event.value
				this.$refs.orderList.triggerLoadData({
					start: 1,
					showLoading: true
				})
			},

			//数据加载
			onListInit(event) {
				event.target.loadPageData = ({
					start,
					pageSize,
					showLoading = false
				}) => {
					let params = {
						current: start,
						pageSize: pageSize,
						orderStatus: this.tabDatas[this.current].value,
					}
					return this.requestCenter.getUserOrderList(params)
						.then(res => {
							return Promise.resolve({
								curPage: start,
								pageCount: res.pages || 1,
								datas: res.records || []
							})
						})
				}
			},

			//订单点击
			orderClick(item) {
				uni.navigateTo({
					url: `/pages/player-order-detail/player-order-detail?id=${item.id}`,
					events: {
						orderBack: (data) => {
							this.$refs.orderList.triggerLoadData({
								start: 1,
								showLoading: true
							})
						}
					}
				})
			},
			
			//续单
			renewOrderClick(item){
				uni.navigateTo({
					url: `/pages/assistant-reserve/assistant-reserve?userId=${item.assistantId}&addOrderType=renewType&orderNo=${item.orderNo}`
				})
			},

			//立即支付
			payNowClick(item) {
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin', //使用微信登录
					success: (loginRes) => {
						let rousePayParams = {
							orderNo: item.orderNo,
							wxCode: loginRes.code
						}
						this.requestCenter.rouseOrderPay(rousePayParams).then(payRes => {
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: payRes.timeStamp,
								nonceStr: payRes.nonceStr,
								package: payRes.package,
								signType: payRes.signType,
								paySign: payRes.paySign,
								success: ((payRes) => {
									this.payResultBack("支付成功")
								}),
								fail: ((err) => {
									this.payResultBack("支付失败")
								})
							});
						})
					},
				})
				// #endif
				
				// #ifdef APP-PLUS
				let rousePayParams = {
					orderNo: item.orderNo,
				}
				this.requestCenter.rouseOrderPay(rousePayParams).then(payRes => {
					console.log("payRes: " + JSON.stringify(payRes));
					uni.requestPayment({
					    "provider": "wxpay",
					    "orderInfo": {
					        "appid": payRes.appId,  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
					        "noncestr": payRes.nonceStr, // 随机字符串
					        "package": payRes.package,        // 固定值
					        "partnerid": payRes.partnerId,      // 微信支付商户号
					        "prepayid": payRes.prepayId, // 统一下单订单号
					        "timestamp": payRes.timeStamp,        // 时间戳（单位：秒）
					        "sign": payRes.sign     // 签名，这里用的 MD5/RSA 签名
					    },
					    success: ((payRes) => {
					    	this.payResultBack("支付成功")
					    }),
					    fail: ((err) => {
					    	this.payResultBack("支付失败")
					    })
					})
				})
				// #endif
				
			},
			
			payResultBack(title){
				uni.showToast({
					title: title,
					duration: 500,
					complete: () => {
						this.$refs.orderList
							.triggerLoadData({
								start: 1,
								showLoading: true
							})
					}
				})
			},
			
			//异常订单
			abnormalClick(item) {
				uni.navigateTo({
					url: `/pages/order-abnormal-report/order-abnormal-report?orderNo=${item.orderNo}&userType=1`
				})
			},
			
			//上报记录
			abnormalRecordClick(item){
				uni.navigateTo({
					url: `/pages/order-report-record/order-report-record?orderNo=${item.orderNo}`
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.page-content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.list-view {
		flex: 1;
		overflow: hidden;
	}

	.order-item {
		display: flex;
		flex-direction: column;
		padding: 0 32rpx;
		box-sizing: border-box;
		background-color: white;
		margin-top: 16rpx;

		.title-row {
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 88rpx;
			justify-content: space-between;
			font-size: 28rpx;

			.num {
				color: #585F70;
			}

			.status {
				color: #01CBFF;
			}
		}

		.divider {
			width: 100%;
			height: 1rpx;
			background-color: #F5F5F5;
		}

		.store {
			font-size: 32rpx;
			color: #021624;
			line-height: 44rpx;
			margin-top: 16rpx;
			font-weight: 500;
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.assistant-leve {
			width: 114rpx;
			height: 40rpx;
			margin-left: 16rpx;
		}

		.content {
			font-size: 28rpx;
			color: #021624;
			line-height: 40rpx;
			margin-top: 8rpx;
		}

		.money {
			color: #ED3C3D;
		}

		.bottom-row {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			padding: 32rpx 0;
			box-sizing: border-box;

			.btn1,
			.btn2 {
				width: 176rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				border-radius: 32rpx;
				font-size: 28rpx;
				margin-left: 32rpx;
			}

			.btn1 {
				background: #FFFFFF;
				border: 1rpx solid #ABAFB7;
				color: #585F70;
			}

			.btn2 {
				background: #FFFFFF;
				border: 1rpx solid #01CBFF;
				color: #01CBFF;
			}
		}
	}
</style>
